<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
    <div class="chart-container">
      <div class="top-item">
        <div class="chart-item">
          <business passvalue="business-chart"/>
        </div>
        <div class="chart-item">
          <productTransaction />
        </div>
      </div>

      <div class="bottom-item">
        <div class="chart-item">
          <placePie />
        </div>
        <div class="chart-item">
          <saleMonthLine />
        </div>

      </div>

    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import business from '../charts/business'
import productTransaction from '../charts/productTransaction'
import placePie from '../charts/placePie'
import saleMonthLine from '../charts/saleMonthLine'

export default {
  name: 'Dashboard',
  components: {
    business,
    productTransaction,
    placePie,
    saleMonthLine
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    display: flex;
    flex-direction: column;
    //width: 100%;
    margin: 30px;
    height: 100%;
    .chart-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex-grow: 1;

      .top-item, .bottom-item {
        display: flex;
        flex-grow: 1;
        margin-top: 20px;
        width: 100%;
        height: 40%;
        overflow: hidden;
      }
      .chart-item{
        //width: 200px;
        //height: 200px;
        display: flex;
        flex-grow: 1;
        height: 100%;
        margin: auto 10px;
      }

    }
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
    flex-shrink: 0;
  }
}
</style>
